<template>
  <div>
    <div id="main" style="width: 100%;height: 350px" v-if="type"></div>
    <div id="offer" style="width: 100%;height: 400px" v-else></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "row-histogram",
  data() {
    return {

    }
  },
  props: {
    type: {Object: Boolean}
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if(this.type) {
        let dom = document.getElementById("main");
        let myChart = echarts.init(dom);
        myChart.setOption(this.getOptions());
      }else {
        let dom = document.getElementById("offer");
        let chart = echarts.init(dom);
        chart.setOption(this.getOptions());
      }

    },
    getOptions() {
      let text = '今日店员业绩';
      let data = ['张三', '李四', '王五', '赵六', '小明', '小李'];
      let nameArr = [
        {name: '询价数量', data: [12, 32, 11, 22, 31, 43]},
        {name: '回收数量', data: [9, 12, 3, 45, 6, 45]}
      ]
      if(!this.type) {
        text = '今日报价师业绩';
        data = ['9号报价师', '5号报价师','24号报价师', '7号报价师', '1号报价师'];
        nameArr = [
          {name: '报价数量', data: [34, 12, 32, 66, 12, 12]},
          {name: '回收数量', data: [9, 4, 22, 45, 6, 2]}
        ]
      }
      return {
        title: {
          text: text
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: data
        },
        series: [
          {
            name: nameArr[0].name,
            type: 'bar',
            data: nameArr[0].data
          },
          {
            name: nameArr[1].name,
            type: 'bar',
            data: nameArr[1].data
          }
        ]
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>
